/**
* 标签组件
**/
.farris-tags {
  .farris-tags-item-container {
    .farris-tag-item {
      border-radius: $farris-border-radius;
      background: rgba($f-aid-05, 0.35);
      border-color: $f-aid-05;
      color: $f-text-02;
      display: inline-block;
      padding: 0 8px;
      margin: 0 10px 0 0;
      line-height: 24px;
      font-size: 13px;
      border: 1px solid;
      white-space: nowrap;
      border-radius: 3px;
      cursor: default;
      opacity: 1;
      transition: all .3s cubic-bezier(.78, .14, .15, .86);

      a,
      a:hover {
        color: rgba(0, 0, 0, .85);
      }

      &>a:first-child:last-child {
        display: inline-block;
        margin: 0 -8px;
        padding: 0 8px;
      }

      .tag-delete {
        color: rgba(0, 0, 0, .2);
        display: inline-block;
        font-size: 10px;
        margin-left: 6px;
        cursor: pointer;
        transition: all .3s cubic-bezier(.78, .14, .15, .86);

        .f-icon {
          font-size: 12px;
        }

        &:hover {
          color: rgba(0, 0, 0, .85)
        }
      }

      &>.f-icon+span,
      &>span+.f-icon {
        margin-left: 7px;
      }


      &.farris-tag-item-success {
        color: $f-semantic-success-01;
        border-color: $f-semantic-success-02;
        background: $f-semantic-success-03;
      }

      &.farris-tag-item-info {
        color: $f-semantic-info-01;
        border-color: $f-semantic-info-02;
        background: $f-semantic-info-03;
      }

      &.farris-tag-item-error {
        color: $f-semantic-danger-01;
        border-color: $f-semantic-danger-02;
        background: $f-semantic-danger-03;
      }

      &.farris-tag-item-warning {
        color: $f-semantic-warning-01;
        border-color: $f-semantic-warning-02;
        background: $f-semantic-warning-03;
      }

      &.farris-tag-item-checkdisabled {
        background-color: transparent;
        border-color: transparent;
        cursor: not-allowed;
        color: rgba(0, 0, 0, .45);
      }

      &.farris-tag-item-checked {
        background-color: #fff;
        border-color: $f-theme-03;
        color: $f-theme-03;
      }

      &:last-child {
        margin-right: 0;
      }

      &.farris-tag-item-checkable:not(.farris-tag-item-checked) {
        background-color: transparent;
        border-color: transparent;
        cursor: pointer;

        &:active {
          color: $f-theme-05;
        }

        &:hover {
          color: $f-theme-05;
        }
      }

      &.farris-tag-item-checked {
        background-color: #fff;
        border-color: $f-theme-03;
        color: $f-theme-03;
      }

      &.farris-tag-item-actived,
      &:active {
        background-color: $f-theme-03;
        color: #ffffff;

        .tag-delete {
          color: #ffffff;
        }
      }
    }

    .farris-tag-add-button {
      cursor: pointer;
      border: 1px dashed;
      border-radius: $farris-border-radius;
      background: #fff;
      border-color: $f-neutral-04;

      .farris-tag-add-text {
        color: $f-text-03;
      }

      .f-icon {
        color: $f-text-03;
      }

      &:hover {
        background: #fff;
        border-color: $f-theme-05;

        .farris-tag-add-text,
        .f-icon {
          color: $f-theme-05;
        }
      }

      &.farris-tag-add-button-disabled {
        background-color: #f7f7f7;
        border-color: #dcdcdc;
        border-style: solid;
        cursor: not-allowed;

        .farris-tag-add-text {
          color: rgba(0, 0, 0, .25);
        }

        &,
        &:hover {
          background: $f-neutral-08;
          border-color: $f-neutral-05;

          .farris-tag-add-text,
          .f-icon {
            color: $f-text-07;
          }
        }


      }
    }

    .farris-tag-input-box {
      display: inline-block;

      .form-control {
        height: 24px;
        width: 100px;

        &:focus {
          box-shadow: none;
        }
      }
    }
  }

  &.farris-tags-checkable {
    .farris-tag-item {
      line-height: 22px;
    }
  }
}